<template>
  <div>
    <ItemMusicTop :playList="state.playlist"></ItemMusicTop>
    <ItemMusicList :itemList="state.itemList"></ItemMusicList>
    <p>11</p>
    <p>22</p>
  </div>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import {useRoute} from "vue-router";
import {getItem, getItemList} from "@/request/api/item.js";
import ItemMusicTop from "@/components/item/ItemMusicTop.vue";
import ItemMusicList from "@/components/item/ItemMusicList.vue";

// 定义歌单数据
const state = reactive({
  // 歌单详情页的页面信息
  playlist: {},
  // 歌单的歌曲信息
  itemList: {},
})

onMounted(async () => {
  // 获得歌单id
  const id = useRoute().query.id

  /* 获得歌曲详情页页面信息 */
  // 发起请求
  const itemPageRes = await getItem(id)
  // 获得歌单数据
  state.playlist = itemPageRes.data.playlist

  /* 获得歌曲详情页的歌单 */
  // 发起请求
  const itemMusicRes = await getItemList(id)
  state.itemList = itemMusicRes.data.songs
  console.log(state.itemList)
})
</script>

<style lang="scss" scoped>

</style>